<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-form-item label="用户id" prop="userId">
        <!--      <el-input v-model="dataForm.userId" placeholder="用户id"></el-input>-->
        {{ detail.userId }}
      </el-form-item>
      <el-form-item label="用户名" prop="userId">
        <!--      <el-input v-model="dataForm.userId" placeholder="用户id"></el-input>-->
        {{ detail.username }}
      </el-form-item>
      <el-form-item label="订单号" prop="orderId">
        <!--      <el-input v-model="dataForm.orderId" placeholder="自定义订单号"></el-input>-->
        {{ detail.orderId }}
      </el-form-item>


      <el-form-item label="订单状态" prop="status">
        <!--      <el-input v-model="dataForm.status" placeholder="订单状态【0新建未支付，1已支付，2申请退款，3已退款】"></el-input>-->

          <el-tag v-if="detail.status === 0">未支付</el-tag>
          <el-tag v-if="detail.status === 1" style="background-color: #5cc0f5;color: white">已支付</el-tag>
          <el-tag v-if="detail.status === 2" style="background-color: #f8839d;color: white">申请退款</el-tag>
          <el-tag v-if="detail.status === 3" style="background-color: #ffab2e;color: white">已退款</el-tag>



      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <!--      <el-input v-model="dataForm.status" placeholder="订单状态【0新建未支付，1已支付，2申请退款，3已退款】"></el-input>-->

        <el-tag v-if="detail.status === 0">未支付</el-tag>
        <el-tag v-if="detail.status === 1" style="background-color: #5cc0f5;color: white">已支付</el-tag>
        <el-tag v-if="detail.status === 2" style="background-color: #f8839d;color: white">申请退款</el-tag>
        <el-tag v-if="detail.status === 3" style="background-color: #ffab2e;color: white">已退款</el-tag>



      </el-form-item>

      <el-form-item  v-if="detail.status === 3||detail.status === 2" label="退款理由" prop="refundReason" >
        {{ this.refundReason }}

      </el-form-item>
      <el-form-item label="课程id" prop="courseId">
        <!--      <el-input v-model="dataForm.courseId" placeholder="课程id"></el-input>-->
        {{ detail.courseId }}
      </el-form-item>
      <el-form-item label="课程类型" prop="courseType">
        <!--      <el-input v-model="dataForm.courseType" placeholder="课程类型【0录播课，1直播课】"></el-input>-->
        <el-tag v-if="detail.courseType === 0" style="background-color: #5cc0f5;color: white">录播课</el-tag>
        <el-tag v-if="detail.courseType === 1" style="background-color: #f8839d;color: white">直播课</el-tag>

      </el-form-item>
      <el-form-item label="支付价格" prop="payPrice">
        <!--      <el-input v-model="dataForm.payPrice" placeholder="支付价格"></el-input>-->
        {{ detail.payPrice }}
      </el-form-item>
      <el-form-item label="支付公司方提供的流水号" prop="serialNum">
        {{ detail.serialNum }}
        <!--      <el-input v-model="dataForm.serialNum" placeholder="支付公司方提供的流水号"></el-input>-->
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <!--      <el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>-->
        {{ detail.createTime }}
      </el-form-item>
      <el-form-item label="更新时间" prop="updateTime">
        <!--      <el-input v-model="dataForm.updateTime" placeholder="更新时间"></el-input>-->
        {{ detail.updateTime }}
      </el-form-item>
      <el-form-item label="支付方式" prop="payMode">
        <!--      <el-input v-model="dataForm.payMode" placeholder="支付方式【'微信','支付宝'】"></el-input>-->
        {{ detail.payMode }}
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
<!--      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>-->
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {

      visible: false,
      detail: {},
      refundReason:'',
      dataForm: {
        id: 0,
        userId: '',
        payMode: '',
        serialNum: '',
        status: '',
        courseId: '',
        courseType: '',
        payPrice: '',
        showStatus: '',
        createTime: '',
        updateTime: '',
        orderId: ''
      },
      dataRule: {
        userId: [
          {required: true, message: '用户id不能为空', trigger: 'blur'}
        ],
        payMode: [
          {required: true, message: '支付方式【微信,支付宝】不能为空', trigger: 'blur'}
        ],
        serialNum: [
          {required: true, message: '支付公司方提供的流水号不能为空', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '订单状态【0新建未支付，1已支付，2申请退款，3已退款】不能为空', trigger: 'blur'}
        ],
        courseId: [
          {required: true, message: '课程id不能为空', trigger: 'blur'}
        ],
        courseType: [
          {required: true, message: '课程类型【0录播课，1直播课】不能为空', trigger: 'blur'}
        ],
        payPrice: [
          {required: true, message: '支付价格不能为空', trigger: 'blur'}
        ],
        showStatus: [
          {required: true, message: '逻辑删除位【0删除，1存在】不能为空', trigger: 'blur'}
        ],
        createTime: [
          {required: true, message: '创建时间不能为空', trigger: 'blur'}
        ],
        updateTime: [
          {required: true, message: '更新时间不能为空', trigger: 'blur'}
        ],
        orderId: [
          {required: true, message: '自定义订单号不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    getRefundReason(){
      this.$http({
        url:this.$http.adornUrl('/course/courseorder/refund/reason'),
        method:'post',
        data:this.$http.adornData({
          'orderId':this.detail.orderId
        })
      }).then(({data})=>{
        this.refundReason=data.data
      })

    },
    init (row) {
      // this.dataForm.id = id || 0
      this.visible = true
      this.detail = row
      if(this.detail.status === 3||this.detail.status === 2){
      this.getRefundReason()}
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()

      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/course/courseorder/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'userId': this.dataForm.userId,
              'payMode': this.dataForm.payMode,
              'serialNum': this.dataForm.serialNum,
              'status': this.dataForm.status,
              'courseId': this.dataForm.courseId,
              'courseType': this.dataForm.courseType,
              'payPrice': this.dataForm.payPrice,
              'showStatus': this.dataForm.showStatus,
              'createTime': this.dataForm.createTime,
              'updateTime': this.dataForm.updateTime,
              'orderId': this.dataForm.orderId
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
